import React from 'react'
import { observer, inject } from 'mobx-react'
import {
    Form,
    Input,
    Select,
    Row,
    Col,
    Checkbox,
    Button,
    DatePicker,
    Steps,
    Icon,
    Divider,
    Spin,
} from 'antd'
import BaseInfo from './baseInfo'
import StandMap from './standMap'
import Tip from "../../common/tip"

const FormItem = Form.Item
const RangePicker = DatePicker.RangePicker
const Step =Steps.Step

@inject("store")
@observer
class ExhibitionForm extends React.Component {
    constructor() {
        super()
    }
    componentDidMount() {
        let id=this.props.id
        if(id!=-1){
            this.props.store.actions.getExhibitionDetail(id);
        }
    }
    componentWillReceiveProps=(nextProps)=>{
        if(nextProps.id=="-1"&&!this.props.store.hasProps){
            this.props.store.actions.clearExhibitionDetail();
        }
    }
    render(){
        let {form,store,id}=this.props;
        let {actions,current}=store
        const formItemLayout = {
            labelCol: {
                sm: { span: 3 },
            },
            wrapperCol: {
                sm: { span: 20 },
            },
        };
        const tailAddFormItemLayout = {
            wrapperCol: {
                sm: {
                    span:24,
                },
            },
        };
        const tailFormItemLayout = {
            wrapperCol: {
                sm: {
                    span: 8,
                    offset: 3,
                },
            },
        };
        const other=(
            <div>
                <FormItem
                    {...formItemLayout}
                    label="历史展览"
                >
                    {store.his.map((hi,index)=> <div style={{border:"1px solid #d9d9d9",padding:'15px',borderRadius:'8px',marginBottom:'10px'}}>
                        <FormItem
                            {...formItemLayout}
                            label={'历史展览名称'}
                            required={true}
                        >
                            {form.getFieldDecorator(`his[${hi.key}].name`, {
                                initialValue:hi.name,
                                validateTrigger: ['onChange', 'onBlur'],
                                rules: [{
                                    required: true,
                                    whitespace: true,
                                    message: "请输入历史展览名称",
                                },{max:30,message:'历史展览名称不得超过30字'}],
                            })(
                                <Input style={{width:'85%'}} />
                            )}
                            {
                                <Button onClick={()=>actions.delHis(index)} style={{float:'right'}}>删除</Button>
                            }
                        </FormItem>
                        <FormItem
                            {...formItemLayout}
                            label={'历史展览链接'}
                            required={true}
                        >
                            {form.getFieldDecorator(`his[${hi.key}].url`, {
                                initialValue:hi.url,
                                validateTrigger: ['onChange', 'onBlur'],
                                rules: [{
                                    required: true,
                                    whitespace: true,
                                    message: "请输入历史展览链接",
                                },{max:180,message:'历史展览链接长度不得大于180位'}],
                            })(
                                <Input addonBefore="Http://chinaexpo365.com/" style={{width:'85%'}} />
                            )}
                        </FormItem>
                    </div>)
                    }
                    {
                        store.his.length < 10 && <FormItem {...tailAddFormItemLayout}>
                            <Button type="dashed" onClick={() => actions.addHis()} style={{'width': '100%'}}>
                                <Icon type="plus"/> 添加历史展览
                            </Button>
                        </FormItem>
                    }
                </FormItem>
                <FormItem
                    {...formItemLayout}
                    label="展览活动"
                >
                    {store.activity.map((hi,index)=> <div style={{border:"1px solid #d9d9d9",padding:'15px',borderRadius:'8px',marginBottom:'10px'}}>
                        <FormItem
                            {...formItemLayout}
                            label={'展览活动名称'}
                            required={true}
                        >
                            {form.getFieldDecorator(`activity[${hi.key}].name`, {
                                initialValue:hi.name,
                                validateTrigger: ['onChange', 'onBlur'],
                                rules: [{
                                    required: true,
                                    whitespace: true,
                                    message: "请输入展览活动名称",
                                },{max:30,message:'展览活动名称不得超过30字'}],
                            })(
                                <Input  style={{width:'85%'}}/>
                            )}
                            {
                                <Button onClick={()=>actions.delActivity(index)} style={{float:'right'}}>删除</Button>
                            }
                        </FormItem>
                        <FormItem
                            {...formItemLayout}
                            label={'展览活动链接'}
                            required={true}
                        >
                            {form.getFieldDecorator(`activity[${hi.key}].url`, {
                                initialValue:hi.url,
                                validateTrigger: ['onChange', 'onBlur'],
                                rules: [{
                                    required: true,
                                    whitespace: true,
                                    message: "请输入展览活动链接",
                                },{max:180,message:'展览活动链接长度不得大于180位'}],
                            })(
                                <Input  addonBefore="Http://chinaexpo365.com/" style={{width:'85%'}}/>
                            )}
                        </FormItem>
                    </div>)
                    }
                    {
                        store.activity.length < 20 && <FormItem {...tailAddFormItemLayout}>
                            <Button type="dashed" onClick={() => actions.addActivity()} style={{'width': '100%'}}>
                                <Icon type="plus"/> 添加展览活动
                            </Button>
                        </FormItem>
                    }
                </FormItem>
            </div>
        );
        const step4=(
            <div style={{paddingLeft:'200px',paddingTop:'50px'}}>
                <h1 style={{fontSize:'28px'}}><Icon type="check-circle-o" className="icon-green"/> 恭喜你创建成功！</h1>
                <a href={`/exhibition/detail?id=${store.id}`} target="_blank">快去看看自己的展览吧</a>
                <Divider type="vertical" />
                <a href="javascript:;" onClick={actions.resetCurrent}>再创一个展览</a>
            </div>
        );
        const steps = [{
            title: '基本信息',
        }, {
            title: '展位信息',
        }, {
            title: '其他（可选）',
        }, {
            title: '创建成功',
        }];
        return (
            <Spin spinning={store.loading}>
                <Tip title={id!=-1?"修改展览":"一键办展"}/>
                {
                    id==-1?<Form>
                            <Steps current={current} style={{marginBottom:'70px'}}>
                                {steps.map(item => <Step key={item.title} title={item.title} />)}
                            </Steps>
                            <div className="steps-content">
                                {
                                    current ===0
                                    && (<div>
                                        <BaseInfo form={form}/>
                                        <FormItem
                                            {...tailFormItemLayout}
                                        >
                                            <Button type="primary" loading={store.loading} onClick={()=>actions.handleBaseInfo(form)}>下一步</Button>
                                        </FormItem>
                                    </div>)
                                }
                                {
                                    current === 1
                                    &&(<div>
                                        <StandMap form={form} id={id}/>
                                        <FormItem
                                            {...tailFormItemLayout}
                                        >
                                            <Button type="primary" loading={store.loading} onClick={()=>actions.handleStand(form)}>下一步</Button>
                                        </FormItem>
                                    </div>)
                                }
                                {
                                    current ===2
                                    &&(<div>
                                        {other}
                                        <FormItem
                                            {...tailFormItemLayout}
                                        >
                                            <Button type="primary" loading={store.loading} onClick={()=>actions.handleOther(form)}>下一步</Button>
                                        </FormItem>
                                    </div>)
                                }
                                {
                                    current ===3
                                    &&step4
                                }
                            </div>
                        </Form>:
                        <Form>
                            <BaseInfo form={form}/>
                            <StandMap form={form} id={id}/>
                            {other}
                            <FormItem
                                {...tailFormItemLayout}
                            >
                                <Button type="primary" loading={store.loading} onClick={()=>actions.updateInfo(id,form)}>确认修改</Button>
                            </FormItem>
                        </Form>
                }
            </Spin>
        )
    }
}
const CreateExhibition=Form.create()(ExhibitionForm)

export default CreateExhibition
